<template>
	<view class="container">
		<view class="content">
			<view class="asset-card">
				<view class="amount-box">
					<view>Tx 通证</view>
					<text class="amount">{{ activeTab === 0 ? '5.00' : '0.00' }}</text>
				</view>
			</view>

			<view class="asset-cards">
				<view class="amount-boxs">
					<text class="amount">喜豆</text>
					<text class="price">0.00</text>
				</view>
				<view class="amount-boxs">
					<text class="amount">当前价</text>
					<text class="price">1</text>
				</view>
			</view>
		</view>
	</view>
	<view class="body-tab">
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
				TV通证
			</view>
			<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
				喜豆
			</view>
		</view>
		<view class="tabline">
			<view class="tab-line" />
			<view class="tab-line1" />
		</view>
		<!-- 转出表单 -->
		<view class="form">
			<view class="form-item">
				<view class="input-title">
					<view class="icon-replace"></view>
					<text>钱包地址</text>
				</view>
				<input class="input" placeholder="输入对方钱包地址" />
			</view>

			<view class="form-item">
				<view class="input-title">
					<view class="icon-replace"></view>
					<text>转出数量</text>
				</view>
				<input class="input" placeholder="输入转出数量" type="number" />
			</view>

			<view class="fee-line">
				<text>手续费(TX)</text>
				<text>0</text>
			</view>
		</view>

		<button class="submit-btn">立即转出</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0 // 0: TV通证 1: 喜豆
			}
		},
		methods: {
			switchTab(index) {
				this.activeTab = index
			}
		}
	}
</script>

<style>
	.container {
		/* min-height: 100vh; */
		padding: 0 28rpx;
		/* background: #D92B2D; */
		background-image: url("@/static/1.png");
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.content {
		width: 100%;
		height: 180px;
	}

	.body-tab {
		z-index: 999;
		width: 90%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		border: 1px solid lavender;
		position: relative;
		top: -20px;
	}

	/* Tab切换样式 */
	.tabs {
		display: flex;
		padding-top: 20rpx;
		margin-bottom: 40rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: 333;
		padding: 24rpx 0;
		position: relative;
	}

	.tab-item.active {
		color: 333;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 3rpx;
	}

	.tabline {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tab-line {
		/* position: relative; */
		width: 50%;
		/* top: -20px; */
		width: 28px;
		border-radius: 20px;
		height: 1px;
		background-color: #D92B2D;
	}
	.tab-line1 {
		/* position: relative; */
		width: 50%;
		/* top: -20px; */
		width: 28px;
		border-radius: 20px;
		height: 1px;
		background-color: #D92B2D;
	}

	/* 资产卡片 */
	.asset-card {
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.asset-cards {
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		display: flex;

		.amount-boxs {
			width: 50%;
		}
	}


	.amount-box {
		text-align: left;
	}

	.amount {
		display: block;
		font-size: 34rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.price {
		font-size: 28rpx;
		color: #999;
	}

	/* 表单样式 */
	.form {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 32rpx;
	}

	.form-item {
		margin-bottom: 48rpx;
	}

	.input-title {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.icon-replace {
		width: 36rpx;
		height: 36rpx;
		background: #ddd;
		margin-right: 16rpx;
	}

	.input {
		height: 96rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 32rpx;
	}

	.fee-line {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666;
		border-top: 2rpx solid #eee;
	}

	/* 按钮样式 */
	.submit-btn {
		margin: 60rpx 0;
		background: #D92B2D;
		color: #fff;
		border-radius: 50rpx;
		font-size: 34rpx;
		height: 96rpx;
		line-height: 96rpx;
		border: none;
	}
</style>